<template>
  <div
    class="cartIcon"
    @mouseenter="getCart"
    @mouseleave="isShowMiniCar = false"
  >
    <router-link to="/shopping"
      ><i class="el-icon-shopping-cart-2"></i> 购物车</router-link
    >

    <!-- 迷你购物车 + 过渡动画-->
    <transition name="el-fade-in">
      <div class="mini" v-show="isShowMiniCar">
        <div class="miniBox" v-show="isCar">
          <ul class="count" v-for="item in cartList" :key="item.id">
            <li>
              <img
                :src="item.s_good.s_goods_photos[0].path"
                style="width: 80px"
                alt=""
              />
              <p>{{ item.s_good.name }}</p>
              <span class="priceText">￥{{ item.s_good.price }}</span>
              <span class="countText">×{{ item.num }}</span>
            </li>
          </ul>

          <!-- 总价 -->
          <div class="total">
            <div>
              <span>共{{ goodsNumber }}件商品&nbsp;&nbsp;&nbsp;总价</span>
              <span>￥{{ goodsCount }}</span>
            </div>
            <el-button size="mini" type="primary">
              <router-link to="/shopping/cart">立即结算</router-link>
            </el-button>
          </div>
        </div>
        <div class="noCart" v-show="!isCar">
          <p>{{ tips }}</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getCart } from "../../api/testApi/cartApi";

export default {
  computed: {
    goodsNumber() {
      // 购物车悬浮窗商品数量
      if (this.cartList.length) {
        // 累加
        return this.cartList.reduce((total, currentItem) => {
          return (total += currentItem.num);
        }, 0);
      } else {
        return 0;
      }
    },
    goodsCount() {
      // 商品总价
      if (this.cartList.length) {
        // 累加
        return this.cartList.reduce((total, currentItem) => {
          return (total += currentItem.num * currentItem.s_good.price);
        }, 0);
      } else {
        return 0;
      }
    },
  },
  data() {
    return {
      isShowMiniCar: false,
      isCar: true,
      tips: "您的购物车内没有商品，请先挑选商品哦",
      // 获取的购物车详情列表
      cartList: [],
    };
  },

  methods: {
    // 获取购物车详情
    async getCart() {
      let query = {
        project_id: 90,
      };
      let res = await getCart(query, this.$store.state.token);
      if (res.status == 200) {
        if (this.cartList.length < 1) {
          this.cartList = res.data.result;
          // 通过获取的购物车商品数量判断minicart显示内容
          if (this.cartList.length) {
            this.isCar = true;
          } else {
            this.isCar = false;
          }
        }
      } else {
        this.tips = "获取购物车失败";
      }
      // 显示迷你购物车
      this.isShowMiniCar = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.cartIcon {
  position: relative;
  a {
    color: rgb(255, 255, 255, 0.7);
  }
  .mini {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 999999;
    width: 300px;
    background-color: #fff;
    color: #000;
    border: 1px solid rgb(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);

    .count {
      width: 100%;
      margin: 10px auto;
      li {
        width: 260px;
        height: 111px;
        border-bottom: 1px solid #e6e6e6;
        margin: 0 auto;
        position: relative;
        img {
          position: absolute;
          top: 16px;
          left: 0;
        }
        p {
          font-size: 18px;
          color: #333;
          line-height: 16px;
          text-align: left;
          width: 164px;
          position: absolute;
          top: 20px;
          left: 88px;
        }
        .priceText,
        .countText {
          font-size: 16px;
          line-height: 14px;
          text-align: left;
          bottom: 21px;
          position: absolute;
        }
        .priceText {
          color: #ff3232;
          left: 88px;
        }
        .countText {
          color: #999;
          left: 150px;
        }
      }
    }
    .total {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: 10px;
      span {
        &:first-child {
          font-size: 12px;
        }
        &:last-child {
          font-size: 22px;
          font-weight: bold;
          color: orangered;
          margin-left: 10px;
        }
      }
      ::v-deep .el-button {
        border-color: #ff3232;
        background-color: #ff3232;
        a {
          color: #fff;
        }
      }
    }
    .noCart {
      height: 70px;
      line-height: 70px;
    }
  }
}
</style>